<template>
  <div id="app">
      <h1>{{num}}</h1>
      <button @click="handleAdd">加</button>
      <button @click="handleSub(-1)">减</button>
      <button @click="handlencAdd($event)">异步+</button>
      <!-- <h1>{{Ouheji}}</h1> -->
      <h1>{{num|Ouheji}}</h1>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  data:function(){
    return{
         num:500
    }
  },
  methods:{
     handleAdd:function(){
       this.num++;
     },
     handleSub:function(step){
       this.num+=step;
     },
     handlencAdd:function(){
       let _this = this
       setTimeout(function(){
         _this.num++;
       },2000)
     }
  },
  filters:{
      Ouheji:function(value){
        let result = value%2 === 0 ?"偶" : "奇";
        return result;
      }
  },
  // computed:{
    //  Ouheji:function(){
    //     let result = this.num % 2 === 0 ?"偶" : "奇";
    //     return result }
  // },
  name: 'App',
  components: {
  
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
